import React from 'react';
import { Table, Space, Button, Modal } from "antd";

type IColumnType = "CUSTOMIZE" | "FIXED" | "REMARK" | "USER_FILL";

enum EColumn {
  CUSTOMIZE = "自定义列",
  FIXED = "固定列",
  REMARK = "备注列",
  USER_FILL = "用户手填列",
}

interface IColumn {
  /**
   * 子级
   */
  children: IColumn[] | null;
  /**
   * id
   */
  id: string;
  /**
   * 层级
   */
  level: number;
  /**
   * 名称
   */
  name?: null | string;
  /**
   * 父ID 为-1则为根节点
   */
  parentId: string;
  /**
   * 表头名称
   */
  title: string | null;
  /**
   * 列类型
   */
  type: IColumnType;
}

function App() {
  const [data, setData] = React.useState<IColumn[]>([{
    "id": "code",
    "parentId": "-1",
    "children": null,
    "name": null,
    "level": 0,
    "title": "编号",
    "type": "FIXED",
  },
  {
    "id": "name",
    "parentId": "-1",
    "children": null,
    "name": null,
    "level": 0,
    "title": "名称",
    "type": "FIXED",
  },
  {
    "id": "remark",
    "parentId": "-1",
    "children": null,
    "name": null,
    "level": 0,
    "title": "工料概要说明",
    "type": "FIXED",
  },])
  const columns = [
    {
      title: '表头名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '列类型',
      dataIndex: 'type',
      key: 'type',
      render(type: IColumnType) {
        return EColumn[type]
      }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render(value: any, record: IColumn) {
        return <Space>
          <a key="export" >
            新建子级
          </a>
          <a key="export" >
            编辑
          </a>
          <a key="export" >
            删除
          </a>
        </Space>
      }
    },
  ]
  const addItem = () => {

  }
  const handleOk = () => {

  }
  const handleCancel = () => {

  }
  return (
    <div className="App">
      <header className="App-header">
        <Space className='main-btn-list'>
          <Button onClick={addItem}>新建</Button>
          <Button>排序</Button>
        </Space>
        <Table className="main-table" dataSource={data} columns={columns} pagination={false} />
        <Modal
          centered
          className="common-modal"
          onOk={handleOk}
        onCancel={handleCancel}
        >
          <div className="modal-container">12</div>
        </Modal>
      </header>
    </div>
  );
}

export default App;
